<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content "></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content "></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content">
                <el-input
                        placeholder="请输入内容"
                        v-model="search"
                        clearable>
                </el-input>
            </div>
        </el-col>
        <el-col :span="15">
            <div class="grid-content ">
                <el-button type="primary" icon="el-icon-search" @click="loadData">搜索</el-button>
                <el-button type="success" @click="dialogFormVisible = true,category={}">添加</el-button>
                <el-button type="danger" @click="oldid" v-show="dataList.length==0">返回上级</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content">
                <el-table
                        :data="dataList"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="分类名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="查看">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="nextpid(scope.row.id)" v-show="ids.length < 3">查看下级</el-link>
                            <el-link type="primary" @click="oldid()" v-show="ids.length > 1">返回上级</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="finById(scope.row.id)">修改</el-link>
                            <el-link type="danger" @click="delById(scope.row.id)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
    </el-row>


<!--    分类保存-->
    <el-dialog title="分类" :visible.sync="dialogFormVisible">
        <el-input v-model="category.id" autocomplete="off" v-show="false"></el-input>
        <el-form :model="category">
            <el-form-item label="分类名称">
                <el-input v-model="category.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>

</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            ids:[0],
            search: "",
            dialogFormVisible: false,
            category: {}
        },
        created() {
            this.loadData(this.id)
        },
        methods: {
            loadData(id) {
                id = this.ids[this.ids.length-1]
                axios.get(`/category/list/${id}?name=${this.search}`).then((res) => {
                    this.dataList = res.data
                    this.total = res.data.length
                }).catch(() => {
                    this.$message.error('数据加载失败，请刷新或联系管理员');
                })
            },
            save() {

                const id = this.category.id
                const action = id ?'update':'save'

                this.category.parentid = this.ids[this.ids.length-1]
                axios.post(`/category/${action}`,this.category).then((res)=>{
                    if(res.data.code == 200){
                        this.$message.success("保存成功")
                        this.loadData(this.ids[this.ids.length])
                        this.dialogFormVisible = false
                    }else{
                        this.$message.error('保存失败，请重试或联系管理员');
                    }
                }).catch(()=>{
                    this.$message.error('执行失败，请刷新或联系管理员');
                })
            },
            delById(id) {
                this.$confirm("确认需要删除吗？此操作不可逆","提示",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    axios.get(`/category/del/${id}`).then((res)=>{
                        let statusCode  = res.data.code
                        if(statusCode==200){
                            this.$message.success(res.data.data)
                            this.loadData(this.ids[this.ids.length-1])
                        }else{
                            this.$message.error(res.data.data)
                        }
                    }).catch(()=>{
                        this.$message.error('执行失败，请刷新或联系管理员');
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })
            },
            finById(id){
                axios.get(`/category/findById/${id}`).then(res=>{
                     this.category = res.data.data
                     this.dialogFormVisible = true
                }).catch(()=>{
                    this.$message.error('执行失败，请刷新或联系管理员');
                })
            },
            nextpid(id){
                this.ids.push(id)
                this.loadData(this.ids[this.ids.length-1])
            },
            oldid(){
                this.ids.pop()
                this.loadData(this.ids[this.ids.length-1])
            }
        }
    })
</script>
</html>